Layout

If you want to change the page layout, look here: Layout and CSS

In the Designer

Adding a text in “Style ref” (or an OCL expression) to the ViewModel in Designer will add that string as a class on the controls tag in the HTML.

Build-in styles for header h1, h2, h3, and h4 work with default bootstrap. Example: h3 as style, will add class=”h3” to the control tag.

If you add a section of { } the part within the braces will be used as formatstring and the rest as style reference. For example, when formatting dates and times, {short} will show dates and times in a compact format.

A robust way to set the format string is to use the tagged value described here Text_formatting instead of appending it to style information.

Picture Style

Images are rendered with img-responsive set. If you override in CSS, img-responsive is ignored.

Pictures NOT in Grids

Has style class vmImage set. Add CSS to set size. See: Size_in_Images_in_Turnkey

Setting Picture Size in Grids

Images in grids will take their size from the CSS rule vmImageInGrid by default. Add your own CSS to set another size.

To set the style for a specific control, or group of controls, add style in the Designer in “Style ref”. The content of “Style ref” will be added to an ng-class tag in the HTML. Don’t forget to add the style in your CSS.

Name Use for Style and CSS-classes

• Name “Style” is used to render HTML as attribute style=”<attribute value>”
• Name “CssClass” is used to render HTML as an added class with the name of the attribute value

Example

In OCL for the Style attribute, use 'background-color:#' + cell.ColourValue.toString('X6') + ';' for sending a colour value to a cell. You can also use an HTML colour name.

Use ‘warning’ or ‘info’ for CssClass and it will colour using Bootstrap default CSS classes.

Table styling

Note! Breaking changes made. If you’ve already implemented using this guide before, look below for a few required changes

You can style tables in different ways: The column, The row or a single Cell

Add style to the ViewModel attribute (for the name and data of the column) and it will style the entire column (“Style ref:” in the Designer).

Add a string attribute to the ViewModel used for a table with the name “Style” or “CssClass” to style the entire row. You usually make the resulting string dependent on the data for the cell for different colouring.

Add a string attribute to the ViewModel used for a table with the name <Column name>_Style or <Column name>_CssClass to style the column of the rendered row, i.e. the Cell. You usually make the resulting string dependent on the data for the cell for different colouring.